import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "."

Item {
    id: window
    visible: true
    width: 1200
    height: 800

    // 定义页面配置数据
    ListModel {
        id: pageConfigModel
        ListElement { icon: "📡"; title: "代理"; color: "#3B82F6"; qmlFile: "Test1.qml" }
        ListElement { icon: "📊"; title: "订阅"; color: "#10B981"; qmlFile: "Test1.qml" }
        ListElement { icon: "🌐"; title: "连接"; color: "#F59E0B"; qmlFile: "Test3.qml" }
        ListElement { icon: "⚡"; title: "规则"; color: "#EF4444"; qmlFile: "Test1.qml" }
        ListElement { icon: "📝"; title: "日志"; color: "#8B5CF6"; qmlFile: "Test1.qml" }
        ListElement { icon: "🧪"; title: "测试"; color: "#06B6D4"; qmlFile: "Test2.qml" }
        ListElement { icon: "⚙️"; title: "设置"; color: "#6B7280"; qmlFile: "Test1.qml" }
    }

    property var pageInstances: []
    property int currentPageIndex: 0

    // 创建页面实例
    Component.onCompleted: {
        for (var i = 0; i < pageConfigModel.count; i++) {
            var config = pageConfigModel.get(i);
            var component = Qt.createComponent(config.qmlFile);

            if (component.status === Component.Ready) {
                var page = component.createObject(null);
                pageInstances.push({
                    config: config,
                    instance: page
                });
            } else {
                // 创建默认页面
                var fallbackPage = createDefaultPage(config);
                pageInstances.push({
                    config: config,
                    instance: fallbackPage
                });
            }
        }

        // 显示第一个页面
        if (pageInstances.length > 0) {
            showPage(0);
        }
    }

    // 创建默认页面的函数
    function createDefaultPage(config) {
        return Qt.createQmlObject('
            import QtQuick 2.15
            import QtQuick.Controls 2.15
            import QtQuick.Layouts 1.15

            Rectangle {
                color: "#0F0F23"

                ScrollView {
                    anchors.fill: parent
                    anchors.margins: 20

                    Column {
                        width: parent.width
                        spacing: 16

                        // 页面标题
                        Text {
                            text: "' + config.title + '"
                            color: "#F8FAFC"
                            font.pointSize: 24
                            font.bold: true
                        }

                        // 示例卡片网格
                        GridView {
                            width: parent.width
                            height: 600
                            cellWidth: 280
                            cellHeight: 120
                            model: 12

                            delegate: Rectangle {
                                width: 260
                                height: 100
                                color: "#1E1E3F"
                                border.color: "#2D2D5A"
                                border.width: 1
                                radius: 8

                                Column {
                                    anchors.centerIn: parent
                                    spacing: 8

                                    Row {
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        spacing: 8

                                        Rectangle {
                                            width: 8
                                            height: 8
                                            radius: 4
                                            color: index % 3 === 0 ? "#10B981" : (index % 3 === 1 ? "#F59E0B" : "#EF4444")
                                        }

                                        Text {
                                            text: "项目 " + (index + 1)
                                            color: "#F8FAFC"
                                            font.pointSize: 12
                                            font.bold: true
                                        }
                                    }

                                    Text {
                                        text: "延迟: " + (50 + Math.floor(Math.random() * 200)) + "ms"
                                        color: "#94A3B8"
                                        font.pointSize: 10
                                        anchors.horizontalCenter: parent.horizontalCenter
                                    }
                                }

                                // 悬停效果
                                MouseArea {
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    onEntered: parent.color = "#252560"
                                    onExited: parent.color = "#1E1E3F"
                                    cursorShape: Qt.PointingHandCursor
                                }
                            }
                        }
                    }
                }
            }
        ', window);
    }

    // 主布局
    RowLayout {
        anchors.fill: parent
        spacing: 0

        // 左侧导航栏
        Rectangle {
            id: sidebar
            width: 200
            Layout.fillHeight: true
            color: "#16213E"

            Column {
                anchors.fill: parent
                spacing: 0

                // 顶部标题区域
                Rectangle {
                    width: parent.width
                    height: 80
                    color: "#0F1629"

                    Column {
                        anchors.centerIn: parent
                        spacing: 4

                        Text {
                            text: "🅱️ Bili Enhance"
                            color: "#3B82F6"
                            font.pointSize: 16
                            font.bold: true
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 导航项目列表
                Repeater {
                    model: pageConfigModel

                    Rectangle {
                        id: navItem
                        width: parent.width
                        height: 50
                        color: {
                            if (index === currentPageIndex) {
                                return "#1E40AF"
                            }
                            return navItemMouseArea.containsMouse ? "#1E3A8A" : "transparent"
                        }

                        // 选中状态指示器
                        Rectangle {
                            visible: index === currentPageIndex
                            width: 3
                            height: parent.height * 0.7
                            color: "#3B82F6"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            radius: 1.5
                        }

                        MouseArea {
                            id: navItemMouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: {
                                currentPageIndex = index;
                                showPage(index);
                            }
                            cursorShape: Qt.PointingHandCursor
                        }

                        // 导航项内容
                        Row {
                            anchors.left: parent.left
                            anchors.leftMargin: 16
                            anchors.verticalCenter: parent.verticalCenter
                            spacing: 12

                            Text {
                                text: model.icon
                                color: index === currentPageIndex ? "#F8FAFC" : "#94A3B8"
                                font.pointSize: 16
                                anchors.verticalCenter: parent.verticalCenter
                            }

                            Text {
                                text: model.title
                                color: index === currentPageIndex ? "#F8FAFC" : "#94A3B8"
                                font.pointSize: 13
                                font.weight: index === currentPageIndex ? Font.DemiBold : Font.Normal
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }
                }

                // 底部填充
                Item {
                    width: parent.width
                    Layout.fillHeight: true
                }
            }
        }

        // 右侧内容区域
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#0F0F23"

            // 顶部标题栏
            Rectangle {
                id: topBar
                width: parent.width
                height: 60
                color: "#16213E"
                anchors.top: parent.top

                Row {
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 16

                    Text {
                        text: "顶级机场"
                        color: "#F8FAFC"
                        font.pointSize: 16
                        font.bold: true
                    }

                    Rectangle {
                        width: 80
                        height: 28
                        color: "#1E40AF"
                        radius: 6

                        Text {
                            anchors.centerIn: parent
                            text: "Selector"
                            color: "#F8FAFC"
                            font.pointSize: 11
                        }
                    }

                    Text {
                        text: "自动选择"
                        color: "#64748B"
                        font.pointSize: 12
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }

                // 右侧控制按钮
                Row {
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 12

                    Repeater {
                        model: ["🎯", "🌐", "📊", "👁", "❌"]

                        Rectangle {
                            width: 32
                            height: 32
                            color: buttonMouseArea.containsMouse ? "#1E40AF" : "#374151"
                            radius: 6

                            Text {
                                anchors.centerIn: parent
                                text: modelData
                                color: "#F8FAFC"
                                font.pointSize: 14
                            }

                            MouseArea {
                                id: buttonMouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                cursorShape: Qt.PointingHandCursor
                            }
                        }
                    }
                }
            }

            // 页面内容区域
            StackView {
                id: pageStack
                anchors.top: topBar.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                pushEnter: null
                pushExit: null
                popEnter: null
                popExit: null
                replaceEnter: null
                replaceExit: null
            }
        }
    }

    // 显示指定索引的页面
    function showPage(index) {
        if (index >= 0 && index < pageInstances.length) {
            var page = pageInstances[index].instance;
            if (pageStack.depth > 0) {
                pageStack.replace(page);
            } else {
                pageStack.push(page);
            }
        }
    }
}
